<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>

    <body>
        <button class="svg-button" aria-label="流光边框按钮">
            <svg width="200" height="50" viewBox="0 0 200 50">
                <defs>
                    <filter id="glow">
                        <feGaussianBlur stdDeviation="2.5" result="coloredBlur" />
                    </filter>
                </defs>
                <rect class="button-bg" x="1" y="1" width="198" height="48" rx="8" ry="8" fill="white" />
                <g id="moving-light-group">
                    <!-- 辉光层 (底层) -->
                    <rect class="light-ray-blur" x="1" y="1" width="198" height="48" rx="8" ry="8" fill="none"
                        stroke="#5cadff" stroke-width="4" stroke-opacity="0.3" filter="url(#glow)" />

                    <!-- 实体层 (顶层) -->
                    <rect class="light-ray-sharp" x="1" y="1" width="198" height="48" rx="8" ry="8" fill="none"
                        stroke="#5cadff" stroke-width="2" />

                    <!-- 流光边框 -->
                    <animate id="border-animation" attributeName="stroke-dashoffset" dur="3s"
                        repeatCount="indefinite" />
                </g>

                <text class="svg-button-text" x="100" y="25" text-anchor="middle" dominant-baseline="middle"
                    fill="#333">
                    这是一个按钮呢
                </text>
            </svg>
        </button>
    </body>

</html>